/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
    margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
    display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
    background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
    border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea,
figure,
figcaption {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
    text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
    vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
    display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
    display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
    display: none;
}

/* ---------- normalize.css end ------------- */

/* ========================================================================
   设置媒体响应式
 ========================================================================== */
/* 设置图片为100%，用于响应式 */
img, video{
    max-width: 100%;
    height: auto;
    width: auto \9;
    /* ie8 */
    vertical-align: middle;
    /* 用于消除图片之间空隙 */
}

/* 响应式Video */
.video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video iframe,
.video object,
.video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 将全局 box-sizing 的值设置 border-box，即元素的 width 和 height 中包含 padding(内边距) 和 border(边框) */
html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -ms-overflow-style: scrollbar;
}

*,
*::before,
*::after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

/* ========================================================================
   栅格布局
 ========================================================================== */
/*
 * 优先设计更小的宽度。
 * 基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。
 * 断点前缀为 eq-g-,即默认布局
 * xs: 特小屏幕 ≥480px
 *  s: 小屏幕 ≥568px
 *  m: 中屏幕   ≥768px
 *  l: 大屏幕 ≥ 1024px
 * xl: 特大屏幕 ≥1200px
 * 命名以eq-前缀。但避免使用.eq-g-,.eq-f- 这样的形式命名
*/
.eq-container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding-right: 15px;
    padding-left: 15px;
    width: 1230px;
    height: 100%;
    max-width: 100%;
}

/* 不同的主体宽度，需先加 eq-container */
.eq-container-min {
    width: 350px;
}

.eq-container-mid {
    width: 700px;
}

.eq-container-small {
    width: 1000px;
}

.eq-container-large {
    width: 1600px;
}

.eq-container-expand {
    max-width: none;
}

/* 浮动清理，不能把清理浮动放在 flex 后面 */
.eq-container::before,
.eq-container::after {
    display: table;
    content: "";
}

.eq-container::after {
    clear: both;
}

/* 栅格布局: 流式布局
 ========================================================================== */
.eq-row {
    *zoom: 1;
}

.eq-row {
    *zoom: 1;
}

.eq-row::before,
.eq-row::after {
    display: table;
    content: "";
}

.eq-row::after {
    clear: both;
}

/* 两个数加起来需等于12,外层需套.eq-row */
[class*="eq-g-"] {
    display: block;
    float: left;
    width: 100%;
    position: relative;
}

/* 默认情况，特小屏幕 <480px */
.eq-g-12 {
    width: 100%;
}

.eq-g-11 {
    width: 70%;
}

.eq-g-10 {
    width: 73%;
}

.eq-g-9 {
    width: 75%;
}

.eq-g-8 {
    width: 66.66666667%;
}

.eq-g-7 {
    width: 58.33333333%;
}

.eq-g-6 {
    width: 50%;
}

.eq-g-5 {
    width: 41.66666667%;
}

.eq-g-4 {
    width: 33.33333333%;
}

.eq-g-3 {
    width: 25%;
}

.eq-g-2 {
    width: 27%;
}

.eq-g-1 {
    width: 30%;
}

@media (min-width: 480px) {
    .eq-g-xs12 {
        width: 100%;
    }

    .eq-g-xs11 {
        width: 70%;
    }

    .eq-g-xs10 {
        width: 73%;
    }

    .eq-g-xs9 {
        width: 75%;
    }

    .eq-g-xs8 {
        width: 66.66666667%;
    }

    .eq-g-xs7 {
        width: 58.33333333%;
    }

    .eq-g-xs6 {
        width: 50%;
    }

    .eq-g-xs5 {
        width: 41.66666667%;
    }

    .eq-g-xs4 {
        width: 33.33333333%;
    }

    .eq-g-xs3 {
        width: 25%;
    }

    .eq-g-xs2 {
        width: 27%;
    }

    .eq-g-xs1 {
        width: 30%;
    }
}

@media (min-width: 568px) {
    .eq-g-s12 {
        width: 100%;
    }

    .eq-g-s11 {
        width: 70%;
    }

    .eq-g-s10 {
        width: 73%;
    }

    .eq-g-s9 {
        width: 75%;
    }

    .eq-g-s8 {
        width: 66.66666667%;
    }

    .eq-g-s7 {
        width: 58.33333333%;
    }

    .eq-g-s6 {
        width: 50%;
    }

    .eq-g-s5 {
        width: 41.66666667%;
    }

    .eq-g-s4 {
        width: 33.33333333%;
    }

    .eq-g-s3 {
        width: 25%;
    }

    .eq-g-s2 {
        width: 27%;
    }

    .eq-g-s1 {
        width: 30%;
    }
}

@media (min-width: 768px) {
    .eq-g-m12 {
        width: 100%;
    }

    .eq-g-m11 {
        width: 70%;
    }

    .eq-g-m10 {
        width: 73%;
    }

    .eq-g-m9 {
        width: 75%;
    }

    .eq-g-m8 {
        width: 66.66666667%;
    }

    .eq-g-m7 {
        width: 58.33333333%;
    }

    .eq-g-m6 {
        width: 50%;
    }

    .eq-g-m5 {
        width: 41.66666667%;
    }

    .eq-g-m4 {
        width: 33.33333333%;
    }

    .eq-g-m3 {
        width: 25%;
    }

    .eq-g-m2 {
        width: 27%;
    }

    .eq-g-m1 {
        width: 30%;
    }
}

@media (min-width: 1024px) {
    .eq-g-l12 {
        width: 100%;
    }

    .eq-g-l11 {
        width: 70%;
    }

    .eq-g-l10 {
        width: 73%;
    }

    .eq-g-l9 {
        width: 75%;
    }

    .eq-g-l8 {
        width: 66.66666667%;
    }

    .eq-g-l7 {
        width: 58.33333333%;
    }

    .eq-g-l6 {
        width: 50%;
    }

    .eq-g-l5 {
        width: 41.66666667%;
    }

    .eq-g-l4 {
        width: 33.33333333%;
    }

    .eq-g-l3 {
        width: 25%;
    }

    .eq-g-l2 {
        width: 27%;
    }

    .eq-g-l1 {
        width: 30%;
    }
}

@media (min-width: 1200px) {
    .eq-g-xl12 {
        width: 100%;
    }

    .eq-g-xl11 {
        width: 70%;
    }

    .eq-g-xl10 {
        width: 73%;
    }

    .eq-g-xl9 {
        width: 75%;
    }

    .eq-g-xl8 {
        width: 66.66666667%;
    }

    .eq-g-xl7 {
        width: 58.33333333%;
    }

    .eq-g-xl6 {
        width: 50%;
    }

    .eq-g-xl5 {
        width: 41.66666667%;
    }

    .eq-g-xl4 {
        width: 33.33333333%;
    }

    .eq-g-xl3 {
        width: 25%;
    }

    .eq-g-xl2 {
        width: 27%;
    }

    .eq-g-xl1 {
        width: 30%;
    }
}

/* 栅格布局: flex 弹性布局
 ========================================================================== */
.eq-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    /* 默认轴线换行 */
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    /* 默认轴线水平方向，起点在左边 */
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}

/* 弹性容器成为单个不可分的行内级元素*/
.eq-flex-inline {
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
}

/* 处理浮动对 flex 布局对影响 */
.eq-flex::before,
.eq-flex::after,
.eq-flex-inline::before,
.eq-flex-inline::after {
    display: none;
}

/*
 * 多个弹性项目换行方式
 */
/* 正常不换行，即一排中显示所有弹性项目 */
.eq-flex-nowrap {
    -ms-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

/* 多行项目反向换行排列 */
.eq-flex-wrap-reverse {
    -ms-flex-wrap: wrap-reverse;
    -webkit-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
}

/*
* 定义主轴起始方向，即从左到右、从上到下及反向排列
*/
/* 反向从右到左 */
.eq-flex-reverse {
    -ms-flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

/* 从上到下，正向 */
.eq-flex-column {
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

/* 从下到上，反向 */
.eq-flex-column-reverse {
    -ms-flex-direction: column-reverse;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

/*
* 弹性项目沿主轴进行空间分配，即从左到右的对齐方式
*/
/* 左边 */
.eq-flex-left {
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

/* 水平局中 */
.eq-flex-center {
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

/* 右边 */
.eq-flex-right {
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

/* 两边分布，首个元素置于起点，末尾元素放置于终点 */
.eq-flex-between {
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

/* 均予分布，每个元素周围分配相同的空间 */
.eq-flex-around {
    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}

/*
* 侧轴方向弹性项目的排列方式，即从上到下的对齐方式，多行排列时无效
*/
/* 上边 */
.eq-flex-top {
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

/* 垂直局中 */
.eq-flex-middle {
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

/* 底部 */
.eq-flex-bottom {
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

/* 拉伸到容器的高度 */
.eq-flex-stretch {
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
}

/* 基线对齐，不同高度时按照基线对齐 */
.eq-flex-baseline {
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}

/*
* 弹性项目侧轴的对齐方式，即多行弹性（受 flex-wrap 影响）元素从上到下的排列方式，单行时无效
*/
/* 上边 */
.eq-flex-wrap-top {
    -ms-flex-line-pack: start;
    -webkit-align-content: flex-start;
    align-content: flex-start;
}

/* 垂直居中 */
.eq-flex-wrap-middle {
    -ms-flex-line-pack: center;
    -webkit-align-content: center;
    align-content: center;
}

/* 底部 */
.eq-flex-wrap-bottom {
    -ms-flex-line-pack: end;
    -webkit-align-content: flex-end;
    align-content: flex-end;
}

/* 垂直两边分布 */
.eq-flex-wrap-between {
    -ms-flex-line-pack: justify;
    -webkit-align-content: space-between;
    align-content: space-between;
}

/* 垂直平均分布 */
.eq-flex-wrap-around {
    -ms-flex-line-pack: distribute;
    -webkit-align-content: space-around;
    align-content: space-around;
}

/* 垂直拉伸分布 */
.eq-flex-wrap-stretch {
    -ms-flex-line-pack: stretch;
    -webkit-align-content: stretch;
    align-content: stretch;
}

@media (min-width: 480px) {
    .eq-flex-xs {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        /* 默认轴线换行 */
        -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        /* 默认轴线水平方向，起点在左边 */
        -ms-flex-direction: row;
        -webkit-flex-direction: row;
        flex-direction: row;
    }

    /* 弹性容器成为单个不可分的行内级元素*/
    .eq-flex-xs-inline {
        display: -ms-inline-flexbox;
        display: -webkit-inline-flex;
        display: inline-flex;
    }

    /* 处理浮动对 flex 布局对影响 */
    .eq-flex-xs::before,
    .eq-flex-xs::after,
    .eq-flex-xs-inline::before,
    .eq-flex-xs-inline::after {
        display: none;
    }

    /*
     * 多个弹性项目换行方式
     */
    /* 正常不换行，即一排中显示所有弹性项目 */
    .eq-flex-xs-nowrap {
        -ms-flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    /* 多行项目反向换行排列 */
    .eq-flex-xs-wrap-reverse {
        -ms-flex-wrap: wrap-reverse;
        -webkit-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse;
    }

    /*
    * 定义主轴起始方向，即从左到右、从上到下及反向排列
    */
    /* 反向从右到左 */
    .eq-flex-xs-reverse {
        -ms-flex-direction: row-reverse;
        -webkit-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }

    /* 从上到下，正向 */
    .eq-flex-xs-column {
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }

    /* 从下到上，反向 */
    .eq-flex-xs-column-reverse {
        -ms-flex-direction: column-reverse;
        -webkit-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    /*
    * 弹性项目沿主轴进行空间分配，即从左到右的对齐方式
    */
    /* 左边 */
    .eq-flex-xs-left {
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    /* 水平局中 */
    .eq-flex-xs-center {
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
    }

    /* 右边 */
    .eq-flex-xs-right {
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }

    /* 两边分布，首个元素置于起点，末尾元素放置于终点 */
    .eq-flex-xs-between {
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

    /* 均予分布，每个元素周围分配相同的空间 */
    .eq-flex-xs-around {
        -ms-flex-pack: distribute;
        -webkit-justify-content: space-around;
        justify-content: space-around;
    }

    /*
    * 侧轴方向弹性项目的排列方式，即从上到下的对齐方式，多行排列时无效
    */
    /* 上边 */
    .eq-flex-xs-top {
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        align-items: flex-start;
    }

    /* 垂直局中 */
    .eq-flex-xs-middle {
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    /* 底部 */
    .eq-flex-xs-bottom {
        -ms-flex-align: end;
        -webkit-align-items: flex-end;
        align-items: flex-end;
    }

    /* 拉伸到容器的高度 */
    .eq-flex-xs-stretch {
        -ms-flex-align: stretch;
        -webkit-align-items: stretch;
        align-items: stretch;
    }

    /* 基线对齐，不同高度时按照基线对齐 */
    .eq-flex-xs-baseline {
        -webkit-align-items: baseline;
        -ms-flex-align: baseline;
        align-items: baseline;
    }

    /*
    * 弹性项目侧轴的对齐方式，即多行弹性（受 flex-wrap 影响）元素从上到下的排列方式，单行时无效
    */
    /* 上边 */
    .eq-flex-xs-wrap-top {
        -ms-flex-line-pack: start;
        -webkit-align-content: flex-start;
        align-content: flex-start;
    }

    /* 垂直居中 */
    .eq-flex-xs-wrap-middle {
        -ms-flex-line-pack: center;
        -webkit-align-content: center;
        align-content: center;
    }

    /* 底部 */
    .eq-flex-xs-wrap-bottom {
        -ms-flex-line-pack: end;
        -webkit-align-content: flex-end;
        align-content: flex-end;
    }

    /* 垂直两边分布 */
    .eq-flex-xs-wrap-between {
        -ms-flex-line-pack: justify;
        -webkit-align-content: space-between;
        align-content: space-between;
    }

    /* 垂直平均分布 */
    .eq-flex-xs-wrap-around {
        -ms-flex-line-pack: distribute;
        -webkit-align-content: space-around;
        align-content: space-around;
    }

    /* 垂直拉伸分布 */
    .eq-flex-xs-wrap-stretch {
        -ms-flex-line-pack: stretch;
        -webkit-align-content: stretch;
        align-content: stretch;
    }
}

@media (min-width: 568px) {
    .eq-flex-s {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        /* 默认轴线换行 */
        -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        /* 默认轴线水平方向，起点在左边 */
        -ms-flex-direction: row;
        -webkit-flex-direction: row;
        flex-direction: row;
    }

    /* 弹性容器成为单个不可分的行内级元素*/
    .eq-flex-s-inline {
        display: -ms-inline-flexbox;
        display: -webkit-inline-flex;
        display: inline-flex;
    }

    /* 处理浮动对 flex 布局对影响 */
    .eq-flex-s::before,
    .eq-flex-s::after,
    .eq-flex-s-inline::before,
    .eq-flex-s-inline::after {
        display: none;
    }

    /*
     * 多个弹性项目换行方式
     */
    /* 正常不换行，即一排中显示所有弹性项目 */
    .eq-flex-s-nowrap {
        -ms-flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    /* 多行项目反向换行排列 */
    .eq-flex-s-wrap-reverse {
        -ms-flex-wrap: wrap-reverse;
        -webkit-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse;
    }

    /*
    * 定义主轴起始方向，即从左到右、从上到下及反向排列
    */
    /* 反向从右到左 */
    .eq-flex-s-reverse {
        -ms-flex-direction: row-reverse;
        -webkit-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }

    /* 从上到下，正向 */
    .eq-flex-s-column {
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }

    /* 从下到上，反向 */
    .eq-flex-s-column-reverse {
        -ms-flex-direction: column-reverse;
        -webkit-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    /*
    * 弹性项目沿主轴进行空间分配，即从左到右的对齐方式
    */
    /* 左边 */
    .eq-flex-s-left {
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    /* 水平局中 */
    .eq-flex-s-center {
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
    }

    /* 右边 */
    .eq-flex-s-right {
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }

    /* 两边分布，首个元素置于起点，末尾元素放置于终点 */
    .eq-flex-s-between {
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

    /* 均予分布，每个元素周围分配相同的空间 */
    .eq-flex-s-around {
        -ms-flex-pack: distribute;
        -webkit-justify-content: space-around;
        justify-content: space-around;
    }

    /*
    * 侧轴方向弹性项目的排列方式，即从上到下的对齐方式，多行排列时无效
    */
    /* 上边 */
    .eq-flex-s-top {
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        align-items: flex-start;
    }

    /* 垂直局中 */
    .eq-flex-s-middle {
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    /* 底部 */
    .eq-flex-s-bottom {
        -ms-flex-align: end;
        -webkit-align-items: flex-end;
        align-items: flex-end;
    }

    /* 拉伸到容器的高度 */
    .eq-flex-s-stretch {
        -ms-flex-align: stretch;
        -webkit-align-items: stretch;
        align-items: stretch;
    }

    /* 基线对齐，不同高度时按照基线对齐 */
    .eq-flex-s-baseline {
        -webkit-align-items: baseline;
        -ms-flex-align: baseline;
        align-items: baseline;
    }

    /*
    * 弹性项目侧轴的对齐方式，即多行弹性（受 flex-wrap 影响）元素从上到下的排列方式，单行时无效
    */
    /* 上边 */
    .eq-flex-s-wrap-top {
        -ms-flex-line-pack: start;
        -webkit-align-content: flex-start;
        align-content: flex-start;
    }

    /* 垂直居中 */
    .eq-flex-s-wrap-middle {
        -ms-flex-line-pack: center;
        -webkit-align-content: center;
        align-content: center;
    }

    /* 底部 */
    .eq-flex-s-wrap-bottom {
        -ms-flex-line-pack: end;
        -webkit-align-content: flex-end;
        align-content: flex-end;
    }

    /* 垂直两边分布 */
    .eq-flex-s-wrap-between {
        -ms-flex-line-pack: justify;
        -webkit-align-content: space-between;
        align-content: space-between;
    }

    /* 垂直平均分布 */
    .eq-flex-s-wrap-around {
        -ms-flex-line-pack: distribute;
        -webkit-align-content: space-around;
        align-content: space-around;
    }

    /* 垂直拉伸分布 */
    .eq-flex-s-wrap-stretch {
        -ms-flex-line-pack: stretch;
        -webkit-align-content: stretch;
        align-content: stretch;
    }
}

@media (min-width: 768px) {
    .eq-flex-m {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        /* 默认轴线换行 */
        -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        /* 默认轴线水平方向，起点在左边 */
        -ms-flex-direction: row;
        -webkit-flex-direction: row;
        flex-direction: row;
    }

    /* 弹性容器成为单个不可分的行内级元素*/
    .eq-flex-m-inline {
        display: -ms-inline-flexbox;
        display: -webkit-inline-flex;
        display: inline-flex;
    }

    /* 处理浮动对 flex 布局对影响 */
    .eq-flex-m::before,
    .eq-flex-m::after,
    .eq-flex-m-inline::before,
    .eq-flex-m-inline::after {
        display: none;
    }

    /*
     * 多个弹性项目换行方式
     */
    /* 正常不换行，即一排中显示所有弹性项目 */
    .eq-flex-m-nowrap {
        -ms-flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    /* 多行项目反向换行排列 */
    .eq-flex-m-wrap-reverse {
        -ms-flex-wrap: wrap-reverse;
        -webkit-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse;
    }

    /*
    * 定义主轴起始方向，即从左到右、从上到下及反向排列
    */
    /* 反向从右到左 */
    .eq-flex-m-reverse {
        -ms-flex-direction: row-reverse;
        -webkit-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }

    /* 从上到下，正向 */
    .eq-flex-m-column {
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }

    /* 从下到上，反向 */
    .eq-flex-m-column-reverse {
        -ms-flex-direction: column-reverse;
        -webkit-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    /*
    * 弹性项目沿主轴进行空间分配，即从左到右的对齐方式
    */
    /* 左边 */
    .eq-flex-m-left {
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    /* 水平局中 */
    .eq-flex-m-center {
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
    }

    /* 右边 */
    .eq-flex-m-right {
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }

    /* 两边分布，首个元素置于起点，末尾元素放置于终点 */
    .eq-flex-m-between {
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

    /* 均予分布，每个元素周围分配相同的空间 */
    .eq-flex-m-around {
        -ms-flex-pack: distribute;
        -webkit-justify-content: space-around;
        justify-content: space-around;
    }

    /*
    * 侧轴方向弹性项目的排列方式，即从上到下的对齐方式，多行排列时无效
    */
    /* 上边 */
    .eq-flex-m-top {
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        align-items: flex-start;
    }

    /* 垂直局中 */
    .eq-flex-m-middle {
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    /* 底部 */
    .eq-flex-m-bottom {
        -ms-flex-align: end;
        -webkit-align-items: flex-end;
        align-items: flex-end;
    }

    /* 拉伸到容器的高度 */
    .eq-flex-m-stretch {
        -ms-flex-align: stretch;
        -webkit-align-items: stretch;
        align-items: stretch;
    }

    /* 基线对齐，不同高度时按照基线对齐 */
    .eq-flex-m-baseline {
        -webkit-align-items: baseline;
        -ms-flex-align: baseline;
        align-items: baseline;
    }

    /*
    * 弹性项目侧轴的对齐方式，即多行弹性（受 flex-wrap 影响）元素从上到下的排列方式，单行时无效
    */
    /* 上边 */
    .eq-flex-m-wrap-top {
        -ms-flex-line-pack: start;
        -webkit-align-content: flex-start;
        align-content: flex-start;
    }

    /* 垂直居中 */
    .eq-flex-m-wrap-middle {
        -ms-flex-line-pack: center;
        -webkit-align-content: center;
        align-content: center;
    }

    /* 底部 */
    .eq-flex-m-wrap-bottom {
        -ms-flex-line-pack: end;
        -webkit-align-content: flex-end;
        align-content: flex-end;
    }

    /* 垂直两边分布 */
    .eq-flex-m-wrap-between {
        -ms-flex-line-pack: justify;
        -webkit-align-content: space-between;
        align-content: space-between;
    }

    /* 垂直平均分布 */
    .eq-flex-m-wrap-around {
        -ms-flex-line-pack: distribute;
        -webkit-align-content: space-around;
        align-content: space-around;
    }

    /* 垂直拉伸分布 */
    .eq-flex-m-wrap-stretch {
        -ms-flex-line-pack: stretch;
        -webkit-align-content: stretch;
        align-content: stretch;
    }
}

@media (min-width: 1024px) {
    .eq-flex-l {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        /* 默认轴线换行 */
        -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        /* 默认轴线水平方向，起点在左边 */
        -ms-flex-direction: row;
        -webkit-flex-direction: row;
        flex-direction: row;
    }

    /* 弹性容器成为单个不可分的行内级元素*/
    .eq-flex-l-inline {
        display: -ms-inline-flexbox;
        display: -webkit-inline-flex;
        display: inline-flex;
    }

    /* 处理浮动对 flex 布局对影响 */
    .eq-flex-l::before,
    .eq-flex-l::after,
    .eq-flex-l-inline::before,
    .eq-flex-l-inline::after {
        display: none;
    }

    /*
     * 多个弹性项目换行方式
     */
    /* 正常不换行，即一排中显示所有弹性项目 */
    .eq-flex-l-nowrap {
        -ms-flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    /* 多行项目反向换行排列 */
    .eq-flex-l-wrap-reverse {
        -ms-flex-wrap: wrap-reverse;
        -webkit-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse;
    }

    /*
    * 定义主轴起始方向，即从左到右、从上到下及反向排列
    */
    /* 反向从右到左 */
    .eq-flex-l-reverse {
        -ms-flex-direction: row-reverse;
        -webkit-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }

    /* 从上到下，正向 */
    .eq-flex-l-column {
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }

    /* 从下到上，反向 */
    .eq-flex-l-column-reverse {
        -ms-flex-direction: column-reverse;
        -webkit-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    /*
    * 弹性项目沿主轴进行空间分配，即从左到右的对齐方式
    */
    /* 左边 */
    .eq-flex-l-left {
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    /* 水平局中 */
    .eq-flex-l-center {
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
    }

    /* 右边 */
    .eq-flex-l-right {
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }

    /* 两边分布，首个元素置于起点，末尾元素放置于终点 */
    .eq-flex-l-between {
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

    /* 均予分布，每个元素周围分配相同的空间 */
    .eq-flex-l-around {
        -ms-flex-pack: distribute;
        -webkit-justify-content: space-around;
        justify-content: space-around;
    }

    /*
    * 侧轴方向弹性项目的排列方式，即从上到下的对齐方式，多行排列时无效
    */
    /* 上边 */
    .eq-flex-l-top {
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        align-items: flex-start;
    }

    /* 垂直局中 */
    .eq-flex-l-middle {
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    /* 底部 */
    .eq-flex-l-bottom {
        -ms-flex-align: end;
        -webkit-align-items: flex-end;
        align-items: flex-end;
    }

    /* 拉伸到容器的高度 */
    .eq-flex-l-stretch {
        -ms-flex-align: stretch;
        -webkit-align-items: stretch;
        align-items: stretch;
    }

    /* 基线对齐，不同高度时按照基线对齐 */
    .eq-flex-l-baseline {
        -webkit-align-items: baseline;
        -ms-flex-align: baseline;
        align-items: baseline;
    }

    /*
    * 弹性项目侧轴的对齐方式，即多行弹性（受 flex-wrap 影响）元素从上到下的排列方式，单行时无效
    */
    /* 上边 */
    .eq-flex-l-wrap-top {
        -ms-flex-line-pack: start;
        -webkit-align-content: flex-start;
        align-content: flex-start;
    }

    /* 垂直居中 */
    .eq-flex-l-wrap-middle {
        -ms-flex-line-pack: center;
        -webkit-align-content: center;
        align-content: center;
    }

    /* 底部 */
    .eq-flex-l-wrap-bottom {
        -ms-flex-line-pack: end;
        -webkit-align-content: flex-end;
        align-content: flex-end;
    }

    /* 垂直两边分布 */
    .eq-flex-l-wrap-between {
        -ms-flex-line-pack: justify;
        -webkit-align-content: space-between;
        align-content: space-between;
    }

    /* 垂直平均分布 */
    .eq-flex-l-wrap-around {
        -ms-flex-line-pack: distribute;
        -webkit-align-content: space-around;
        align-content: space-around;
    }

    /* 垂直拉伸分布 */
    .eq-flex-l-wrap-stretch {
        -ms-flex-line-pack: stretch;
        -webkit-align-content: stretch;
        align-content: stretch;
    }
}

@media (min-width: 1200px) {
    .eq-flex-xl {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        /* 默认轴线换行 */
        -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        /* 默认轴线水平方向，起点在左边 */
        -ms-flex-direction: row;
        -webkit-flex-direction: row;
        flex-direction: row;
    }

    /* 弹性容器成为单个不可分的行内级元素*/
    .eq-flex-xl-inline {
        display: -ms-inline-flexbox;
        display: -webkit-inline-flex;
        display: inline-flex;
    }

    /* 处理浮动对 flex 布局对影响 */
    .eq-flex-xl::before,
    .eq-flex-xl::after,
    .eq-flex-xl-inline::before,
    .eq-flex-xl-inline::after {
        display: none;
    }

    /*
     * 多个弹性项目换行方式
     */
    /* 正常不换行，即一排中显示所有弹性项目 */
    .eq-flex-xl-nowrap {
        -ms-flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    /* 多行项目反向换行排列 */
    .eq-flex-xl-wrap-reverse {
        -ms-flex-wrap: wrap-reverse;
        -webkit-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse;
    }

    /*
    * 定义主轴起始方向，即从左到右、从上到下及反向排列
    */
    /* 反向从右到左 */
    .eq-flex-xl-reverse {
        -ms-flex-direction: row-reverse;
        -webkit-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }

    /* 从上到下，正向 */
    .eq-flex-xl-column {
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }

    /* 从下到上，反向 */
    .eq-flex-xl-column-reverse {
        -ms-flex-direction: column-reverse;
        -webkit-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    /*
    * 弹性项目沿主轴进行空间分配，即从左到右的对齐方式
    */
    /* 左边 */
    .eq-flex-xl-left {
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    /* 水平局中 */
    .eq-flex-xl-center {
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
    }

    /* 右边 */
    .eq-flex-xl-right {
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }

    /* 两边分布，首个元素置于起点，末尾元素放置于终点 */
    .eq-flex-xl-between {
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

    /* 均予分布，每个元素周围分配相同的空间 */
    .eq-flex-xl-around {
        -ms-flex-pack: distribute;
        -webkit-justify-content: space-around;
        justify-content: space-around;
    }

    /*
    * 侧轴方向弹性项目的排列方式，即从上到下的对齐方式，多行排列时无效
    */
    /* 上边 */
    .eq-flex-xl-top {
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        align-items: flex-start;
    }

    /* 垂直局中 */
    .eq-flex-xl-middle {
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    /* 底部 */
    .eq-flex-xl-bottom {
        -ms-flex-align: end;
        -webkit-align-items: flex-end;
        align-items: flex-end;
    }

    /* 拉伸到容器的高度 */
    .eq-flex-xl-stretch {
        -ms-flex-align: stretch;
        -webkit-align-items: stretch;
        align-items: stretch;
    }

    /* 基线对齐，不同高度时按照基线对齐 */
    .eq-flex-xl-baseline {
        -webkit-align-items: baseline;
        -ms-flex-align: baseline;
        align-items: baseline;
    }

    /*
    * 弹性项目侧轴的对齐方式，即多行弹性（受 flex-wrap 影响）元素从上到下的排列方式，单行时无效
    */
    /* 上边 */
    .eq-flex-xl-wrap-top {
        -ms-flex-line-pack: start;
        -webkit-align-content: flex-start;
        align-content: flex-start;
    }

    /* 垂直居中 */
    .eq-flex-xl-wrap-middle {
        -ms-flex-line-pack: center;
        -webkit-align-content: center;
        align-content: center;
    }

    /* 底部 */
    .eq-flex-xl-wrap-bottom {
        -ms-flex-line-pack: end;
        -webkit-align-content: flex-end;
        align-content: flex-end;
    }

    /* 垂直两边分布 */
    .eq-flex-xl-wrap-between {
        -ms-flex-line-pack: justify;
        -webkit-align-content: space-between;
        align-content: space-between;
    }

    /* 垂直平均分布 */
    .eq-flex-xl-wrap-around {
        -ms-flex-line-pack: distribute;
        -webkit-align-content: space-around;
        align-content: space-around;
    }

    /* 垂直拉伸分布 */
    .eq-flex-xl-wrap-stretch {
        -ms-flex-line-pack: stretch;
        -webkit-align-content: stretch;
        align-content: stretch;
    }
}

/* 栅格布局: flex 网格系统
 ========================================================================== */
[class*="eq-f-"],
[class*="eq-f-col-"] > *
{
    width: 100%;
    /*
     * https://css-tricks.com/fighting-the-space-between-inline-block-elements/
     */
    display: inline-block \9; /* ie8~9 */
    margin-right: -3px \9;
}


/* 自动恒等划分 */
.eq-f-col > * {
    -webkit-flex: 1 1 0;
    -ms-flex: 1 1 0;
    flex: 1 1 0;
}

/* 根据内容适应 */
.eq-f-col-auto > * {
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: auto;
}

.eq-f-col-1 > * {
    -webkit-flex: 1 1 100%;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    width: 100%;
}

.eq-f-col-2 > * {
    -webkit-flex: 1 1 50%;
    -ms-flex: 1 1 50%;
    flex: 1 1 50%;
    width: 50%;
}

.eq-f-col-3 > * {
    -webkit-flex: 1 1 33.3333333333%;

    flex: 1 1 33.3333333333%;
    -ms-flex: 1 1 auto; /* ie */
    width: 33.3333333333%;
}

.eq-f-col-4 > * {
    -webkit-flex: 1 1 25%;
    -ms-flex: 1 1 25%;
    flex: 1 1 25%;
    width: 25%;
}

.eq-f-col-5 > * {
    -webkit-flex: 1 1 20%;
    -ms-flex: 1 1 20%;
    flex: 1 1 20%;
    width: 20%;
}

.eq-f-col-6 > * {
    -webkit-flex: 1 1 16.6666666667%;
    -ms-flex: 1 1 16.6666666667%;
    flex: 1 1 16.6666666667%;
    width: 16.6666666667%;
}

.eq-f-col-7 > * {
    -webkit-flex: 1 1 14.285714285714286%;
    -ms-flex: 1 1 14.285714285714286%;
    flex: 1 1 14.285714285714286%;
    width: 14.285714285714286%;
}

.eq-f-col-8 > * {
    -webkit-flex: 1 1 12.5%;
    -ms-flex: 1 1 12.5%;
    flex: 1 1 12.5%;
    width: 12.5%;
}

.eq-f-1 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 30%;
    -ms-flex: 0 0 30%;
    flex: 0 0 30%;
    max-width: 30%;
}

.eq-f-2 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 27%;
    -ms-flex: 0 0 27%;
    flex: 0 0 27%;
    max-width: 27%;
}

.eq-f-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}

.eq-f-4 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.333333%;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.eq-f-5 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 41.666667%;
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}

.eq-f-6 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.eq-f-7 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 58.33333333%;
    -ms-flex: 0 0 58.33333333%;
    flex: 0 0 58.33333333%;
    max-width: 58.33333333%;
}

.eq-f-8 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 66.666667%;
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}

.eq-f-9 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 75%;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
}

.eq-f-10 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 73%;
    -ms-flex: 0 0 73%;
    flex: 0 0 73%;
    max-width: 73%;
}

.eq-f-11 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 70%;
    -ms-flex: 0 0 70%;
    flex: 0 0 70%;
    max-width: 70%;
}

.eq-f-12 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 480px) {

    .eq-f-col-xs > * {
        -webkit-flex: 1 1 0;
        -ms-flex: 1 1 0;
        flex: 1 1 0;
    }

    .eq-f-col-xs-auto > * {
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        width: auto;
    }

    .eq-f-col-xs1 > * {
        -webkit-flex: 1 1 100%;
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
        width: 100%;
    }

    .eq-f-col-xs2 > * {
        -webkit-flex: 1 1 50%;
        -ms-flex: 1 1 50%;
        flex: 1 1 50%;
        width: 50%;
    }

    .eq-f-col-xs3 > * {
        -webkit-flex: 1 1 33.3333333333%;
        -ms-flex: 1 1 33.3333333333%;
        flex: 1 1 33.3333333333%;
        width: 33.3333333333%;
    }

    .eq-f-col-xs4 > * {
        -webkit-flex: 1 1 25%;
        -ms-flex: 1 1 25%;
        flex: 1 1 25%;
        width: 25%;
    }

    .eq-f-col-xs5 > * {
        -webkit-flex: 1 1 20%;
        -ms-flex: 1 1 20%;
        flex: 1 1 20%;
        width: 20%;
    }

    .eq-f-col-xs6 > * {
        -webkit-flex: 1 1 16.6666666667%;
        -ms-flex: 1 1 16.6666666667%;
        flex: 1 1 16.6666666667%;
        width: 16.6666666667%;
    }

    .eq-f-col-xs7 > * {
        -webkit-flex: 1 1 14.285714285714286%;
        -ms-flex: 1 1 14.285714285714286%;
        flex: 1 1 14.285714285714286%;
        width: 14.285714285714286%;
    }

    .eq-f-col-xs8 > * {
        -webkit-flex: 1 1 12.5%;
        -ms-flex: 1 1 12.5%;
        flex: 1 1 12.5%;
        width: 12.5%;
    }

    .eq-f-xs1 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 30%;
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30%;
    }

    .eq-f-xs2 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 27%;
        -ms-flex: 0 0 27%;
        flex: 0 0 27%;
        max-width: 27%;
    }

    .eq-f-xs3 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .eq-f-xs4 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 33.333333%;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .eq-f-xs5 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 41.666667%;
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .eq-f-xs6 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .eq-f-xs7 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 58.33333333%;
        -ms-flex: 0 0 58.33333333%;
        flex: 0 0 58.33333333%;
        max-width: 58.33333333%;
    }

    .eq-f-xs8 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 66.666667%;
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .eq-f-xs9 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 75%;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .eq-f-xs10 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 73%;
        -ms-flex: 0 0 73%;
        flex: 0 0 73%;
        max-width: 73%;
    }

    .eq-f-xs11 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 70%;
        -ms-flex: 0 0 70%;
        flex: 0 0 70%;
        max-width: 70%;
    }

    .eq-f-xs12 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 568px) {

    .eq-f-col-s > * {
        -webkit-flex: 1 1 0;
        -ms-flex: 1 1 0;
        flex: 1 1 0;
    }

    .eq-f-col-s-auto > * {
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        width: auto;
    }

    .eq-f-col-s1 > * {
        -webkit-flex: 1 1 100%;
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
        width: 100%;
    }

    .eq-f-col-s2 > * {
        -webkit-flex: 1 1 50%;
        -ms-flex: 1 1 50%;
        flex: 1 1 50%;
        width: 50%;
    }

    .eq-f-col-s3 > * {
        -webkit-flex: 1 1 33.3333333333%;
        -ms-flex: 1 1 33.3333333333%;
        flex: 1 1 33.3333333333%;
        width: 33.3333333333%;
    }

    .eq-f-col-s4 > * {
        -webkit-flex: 1 1 25%;
        -ms-flex: 1 1 25%;
        flex: 1 1 25%;
        width: 25%;
    }

    .eq-f-col-s5 > * {
        -webkit-flex: 1 1 20%;
        -ms-flex: 1 1 20%;
        flex: 1 1 20%;
        width: 20%;
    }

    .eq-f-col-s6 > * {
        -webkit-flex: 1 1 16.6666666667%;
        -ms-flex: 1 1 16.6666666667%;
        flex: 1 1 16.6666666667%;
        width: 16.6666666667%;
    }

    .eq-f-col-s7 > * {
        -webkit-flex: 1 1 14.285714285714286%;
        -ms-flex: 1 1 14.285714285714286%;
        flex: 1 1 14.285714285714286%;
        width: 14.285714285714286%;
    }

    .eq-f-col-s8 > * {
        -webkit-flex: 1 1 12.5%;
        -ms-flex: 1 1 12.5%;
        flex: 1 1 12.5%;
        width: 12.5%;
    }

    .eq-f-s1 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 30%;
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30%;
    }

    .eq-f-s2 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 27%;
        -ms-flex: 0 0 27%;
        flex: 0 0 27%;
        max-width: 27%;
    }

    .eq-f-s3 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .eq-f-s4 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 33.333333%;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .eq-f-s5 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 41.666667%;
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .eq-f-s6 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .eq-f-s7 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 58.33333333%;
        -ms-flex: 0 0 58.33333333%;
        flex: 0 0 58.33333333%;
        max-width: 58.33333333%;
    }

    .eq-f-s8 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 66.666667%;
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .eq-f-s9 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 75%;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .eq-f-s10 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 73%;
        -ms-flex: 0 0 73%;
        flex: 0 0 73%;
        max-width: 73%;
    }

    .eq-f-s11 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 70%;
        -ms-flex: 0 0 70%;
        flex: 0 0 70%;
        max-width: 70%;
    }

    .eq-f-s12 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 768px) {

    .eq-f-col-m > * {
        -webkit-flex: 1 1 0;
        -ms-flex: 1 1 0;
        flex: 1 1 0;
    }

    .eq-f-col-m-auto > * {
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        width: auto;
    }

    .eq-f-col-m1 > * {
        -webkit-flex: 1 1 100%;
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
        width: 100%;
    }

    .eq-f-col-m2 > * {
        -webkit-flex: 1 1 50%;
        -ms-flex: 1 1 50%;
        flex: 1 1 50%;
        width: 50%;
    }

    .eq-f-col-m3 > * {
        -webkit-flex: 1 1 33.3333333333%;

        width: 33%;
        flex: 1 1 33.3333333333%;
        -ms-flex: 1 1 auto; /* ie */
    }

    .eq-f-col-m4 > * {
        -webkit-flex: 1 1 25%;
        -ms-flex: 1 1 25%;
        flex: 1 1 25%;
        width: 25%;
    }

    .eq-f-col-m5 > * {
        -webkit-flex: 1 1 20%;
        -ms-flex: 1 1 20%;
        flex: 1 1 20%;
        width: 20%;
    }

    .eq-f-col-m6 > * {
        -webkit-flex: 1 1 16.6666666667%;
        -ms-flex: 1 1 16.6666666667%;
        flex: 1 1 16.6666666667%;
        width: 16.6666666667%;
    }

    .eq-f-col-m7 > * {
        -webkit-flex: 1 1 14.285714285714286%;
        -ms-flex: 1 1 14.285714285714286%;
        flex: 1 1 14.285714285714286%;
        width: 14.285714285714286%;
    }

    .eq-f-col-m8 > * {
        -webkit-flex: 1 1 12.5%;
        -ms-flex: 1 1 12.5%;
        flex: 1 1 12.5%;
        width: 12.5%;
    }

    .eq-f-m1 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 30%;
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30%;
    }

    .eq-f-m2 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 27%;
        -ms-flex: 0 0 27%;
        flex: 0 0 27%;
        max-width: 27%;
    }

    .eq-f-m3 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .eq-f-m4 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 33.333333%;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .eq-f-m5 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 41.666667%;
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .eq-f-m6 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .eq-f-m7 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 58.333333%;
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .eq-f-m8 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 66.666667%;
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
  
    .eq-f-m9 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 75%;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .eq-f-m10 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 73%;
        -ms-flex: 0 0 73%;
        flex: 0 0 73%;
        max-width: 73%;
    }

    .eq-f-m11 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 70%;
        -ms-flex: 0 0 70%;
        flex: 0 0 70%;
        max-width: 70%;
    }

    .eq-f-m12 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 1024px) {

    .eq-f-l-col > * {
        -webkit-flex: 1 1 0;
        -ms-flex: 1 1 0;
        flex: 1 1 0;
    }

    .eq-f-col-l-auto > * {
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        width: auto;
    }

    .eq-f-col-l1 > * {
        -webkit-flex: 1 1 100%;
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
        width: 100%;
    }

    .eq-f-col-l2 > * {
        -webkit-flex: 1 1 50%;
        -ms-flex: 1 1 50%;
        flex: 1 1 50%;
        width: 50%;
    }

    .eq-f-col-l3 > * {
        -webkit-flex: 1 1 33.3333333333%;
        -ms-flex: 1 1 33.3333333333%;
        flex: 1 1 33.3333333333%;
        width: 33.3333333333%;
    }

    .eq-f-col-l4 > * {
        -webkit-flex: 1 1 25%;
        -ms-flex: 1 1 25%;
        flex: 1 1 25%;
        width: 25%;
    }

    .eq-f-col-l5 > * {
        -webkit-flex: 1 1 20%;
        -ms-flex: 1 1 20%;
        flex: 1 1 20%;
        width: 20%;
    }

    .eq-f-col-l6 > * {
        -webkit-flex: 1 1 16.6666666667%;
        -ms-flex: 1 1 16.6666666667%;
        flex: 1 1 16.6666666667%;
        width: 16.6666666667%;
    }

    .eq-f-col-l7 > * {
        -webkit-flex: 1 1 14.285714285714286%;
        -ms-flex: 1 1 14.285714285714286%;
        flex: 1 1 14.285714285714286%;
        width: 14.285714285714286%;
    }

    .eq-f-col-l8 > * {
        -webkit-flex: 1 1 12.5%;
        -ms-flex: 1 1 12.5%;
        flex: 1 1 12.5%;
        width: 12.5%;
    }

    .eq-f-l1 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 30%;
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30%;
    }

    .eq-f-l2 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 27%;
        -ms-flex: 0 0 27%;
        flex: 0 0 27%;
        max-width: 27%;
    }

    .eq-f-l3 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .eq-f-l4 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 33.333333%;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .eq-f-l5 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 41.666667%;
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .eq-f-l6 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .eq-f-l7 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 58.33333333%;
        -ms-flex: 0 0 58.33333333%;
        flex: 0 0 58.33333333%;
        max-width: 58.33333333%;
    }

    .eq-f-l8 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 66.666667%;
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .eq-f-l9 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 75%;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .eq-f-l10 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 73%;
        -ms-flex: 0 0 73%;
        flex: 0 0 73%;
        max-width: 73%;
    }

    .eq-f-l11 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 70%;
        -ms-flex: 0 0 70%;
        flex: 0 0 70%;
        max-width: 70%;
    }

    .eq-f-l12 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 1200px) {

    .eq-f-col-xl > * {
        -webkit-flex: 1 1 0;
        -ms-flex: 1 1 0;
        flex: 1 1 0;
    }

    .eq-f-col-xl-auto > * {
        flex: 0 0 auto;
        width: auto;
    }

    .eq-f-col-xl1 > * {
        flex: 0 0 auto;
        width: 100%;
    }

    .eq-f-col-xl2 > * {
        flex: 0 0 auto;
        width: 50%;
    }

    .eq-f-col-xl3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }

    .eq-f-col-xl4 > * {
        flex: 0 0 auto;
        width: 25%;
    }

    .eq-f-col-xl5 > * {
        flex: 0 0 auto;
        width: 20%;
    }

    .eq-f-col-xl6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }

    .eq-f-col-xl7 > * {
        flex: 0 0 auto;
        width: 14.285714285714286%;
    }

    .eq-f-col-xl8 > * {
        flex: 0 0 auto;
        width: 12.5%;
    }

    .eq-f-xl1 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 30%;
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30%;
    }

    .eq-f-xl2 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 27%;
        -ms-flex: 0 0 27%;
        flex: 0 0 27%;
        max-width: 27%;
    }

    .eq-f-xl3 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .eq-f-xl4 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 33.333333%;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .eq-f-xl5 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 41.666667%;
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .eq-f-xl6 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .eq-f-xl7 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 58.33333333%;
        -ms-flex: 0 0 58.33333333%;
        flex: 0 0 58.33333333%;
        max-width: 58.33333333%;
    }

    .eq-f-xl8 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 66.666667%;
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .eq-f-xl9 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 75%;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .eq-f-xl10 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 73%;
        -ms-flex: 0 0 73%;
        flex: 0 0 73%;
        max-width: 73%;
    }

    .eq-f-xl11 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 70%;
        -ms-flex: 0 0 70%;
        flex: 0 0 70%;
        max-width: 70%;
    }

    .eq-f-xl12 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* 栅格布局: 间隔网格
 ========================================================================== */

@media (min-width: 568px) {
    .eq-gutter {
        margin-left: -20px;
        margin-top: -20px;
        width: -webkit-calc(100% + 20px);
        width: -moz-calc(100% + 20px);
        width: calc(100% + 20px);
        height: -webkit-calc(100% + 20px);
        height: -moz-calc(100% + 20px);
        height: calc(100% + 20px);
        overflow: hidden;
    }

    .eq-gutter > * {
        padding-left: 20px;
        padding-top: 20px;
    }

    .eq-gutter-small {
        margin-left: -15px;
    }

    .eq-gutter-small > * {
        padding-left: 15px;
    }

    .eq-gutter-large {
        margin-left: -40px;
    }

    .eq-gutter-large > * {
        padding-left: 40px;
    }
}

@media (min-width: 1024px) {
    .eq-gutter {
        margin-left: -40px;
        margin-top: -40px;
        width: -webkit-calc(100% + 40px);
        width: -moz-calc(100% + 40px);
        width: calc(100% + 40px);
    }

    .eq-gutter > * {
        padding-left: 40px;
        padding-top: 40px;
    }

    .eq-gutter-small {
        margin-left: -20px;
    }

    .eq-gutter-small > * {
        padding-left: 20px;
    }

    .eq-gutter-large {
        margin-left: -60px;
    }

    .eq-gutter-large > * {
        padding-left: 60px;
    }
}

/* ========================================================================
   组件
 ========================================================================== */

/* 组件: 背景色
 ========================================================================== */
.eq-background-grey {
    background: #f8f8f8;
}

.eq-background-gradient {
    background: #179fe3;
    background: -moz-radial-gradient(top, ellipse cover, #179fe3 0%, #236CB3 100%);
    background: -webkit-radial-gradient(top, ellipse cover, #179fe3 0%, #236CB3 100%);
    background: radial-gradient(ellipse at top, #179fe3 0%, #236CB3 100%);
    filter: progid:DXImageTransform.Microsoft.eq-gradient(startColorstr='#179fe3', endColorstr='#236CB3', GradientType=1);
    height: 100%;
}

/* 组件: 按钮
 ========================================================================== */
.eq-button {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    /* user-select: 文本不被选择 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0 1.875rem;
    line-height: 36px;
    border: 1px solid #E3E3E3;
    border-radius: 0.3125rem;
    background: transparent;
    color: #585858;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.eq-button:focus, .eq-button:hover {
    text-decoration: none;
    outline: none;
    background: #E3E3E3;
    color: #585858;
}

/*
* 按钮颜色
*/
/* 蓝色 */
.eq-button-primary {
    border-color: rgba(70, 149, 216, 1);
    background: rgba(70, 149, 216, 1);
    color: #ffffff;
}

.eq-button-primary:hover,
.eq-button-primary:focus {
    background: rgba(65, 142, 204, 1);
    color: #ffffff;
}

/* 玫红色 */
.eq-button-secondary {
    border-color: rgba(216, 70, 128, 1);
    background: rgba(216, 70, 128, 1);
    color: #ffffff;
}

.eq-button-secondary:hover,
.eq-button-secondary:focus {
    background: rgba(204, 65, 121, 1);
    color: #ffffff;
}

/* 白色线框 */
.eq-button-line-white {
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.8);
}

.eq-button-line-white:hover,
.eq-button-line-white:focus,
.eq-button-line-white:enabled {
    color: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 1);
    background: transparent;
}

/* 被禁用时 */
.eq-button-line-white:disabled {
    color: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.5);
}

/*
* 按钮大小
*/
.eq-button-small {
    padding: 0 15px;
    line-height: 28px;
    font-size: 0.75rem;
}

.eq-button-large {
    padding: 0 40px;
    line-height: 50px;
    font-size: 1rem;
}

/*
* 按钮形状
*/
/* 圆形 */
.eq-button-radius {
    width: 42px;
    height: 42px;
    line-height: 40px;
    border-radius: 100%;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    font-size: 1.125rem;
}

/* 组件: 面包屑导航
 ========================================================================== */
.eq-breadcrumb {
    margin: 1rem auto;
    font-size: 12px;
}

.breadcrumb-home {
    /*background: url("../images/breadcrumb-home.svg") no-repeat left center;*/
    padding-left: 20px;
}

.eq-breadcrumb a {
    color: #989898;
}

.eq-breadcrumb a:before {
    content: "/";
    color: #D9D9D9;
    padding: 0 6px;
}

.eq-breadcrumb a:first-child:before {
    content: none;
}

.eq-breadcrumb a:last-child {
    color: #585858;
    pointer-events: none;
    cursor: default;
}


/* 组件: 卡片
 ========================================================================== */
.eq-card {
    position: relative;
    border-radius: 8px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

/*
* 划分卡片区域
*/
.eq-card-header,
.eq-card-body,
.eq-card-footer {
    padding: 0 20px;
    margin: 20px 0;
}

.eq-card-header,
.eq-card-body,
.eq-card-footer {
    *zoom: 1;
}

.eq-card-body::before,
.eq-card-body::after,
.eq-card-header::before,
.eq-card-header::after,
.eq-card-footer::before,
.eq-card-footer::after {
    content: "";
    display: table;
}

.eq-card-body::after,
.eq-card-header::after,
.eq-card-footer::after {
    clear: both;
}

/*
移除最后元素的 margin
*/
.eq-card-body > :last-child,
.eq-card-header > :last-child,
.eq-card-footer > :last-child {
    margin-bottom: 0;
}

/*
* 卡片选择
*/
.eq-card-select {
    position: absolute;
    left: 12px;
    top: 12px;
}

/*
* 卡片样式
*/
/* 默认白色底 */
.eq-card-default {
    background: #ffffff;
}

.eq-card-default .eq-card-title {
    font-weight: normal;
}

/* 蓝色底 */
.eq-card-primary {
    background: #4695D8;
    color: rgba(255, 255, 255, 0.8);
}

.eq-card-primary:hover {
    box-shadow: 0 4px 26px 4px rgba(69, 149, 216, 0.3);
}

/* 黑色底 */
.eq-card-secondary {
    background: #222;
    color: rgba(255, 255, 255, 0.8);
}

/* 深色低标题色 */
.eq-card-primary .eq-card-title,
.eq-card-secondary .eq-card-title {
    color: #ffffff;
    font-weight: normal;
}

/*
* 卡片媒体
*/
.eq-card-media-top {
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}

/*
* 卡片交互
*/

.eq-card:hover {
    box-shadow: 0 4px 26px 4px rgba(0, 0, 0, 0.1);
}

.eq-card .eq-checkbox {
    display: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='14px' height='10px' viewBox='0 0 14 10' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3ECombined Shape Copy 2%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Ariticle' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-120.000000, -366.000000)'%3E%3Cg id='artical' transform='translate(100.000000, 309.000000)' fill='%23FFFFFF'%3E%3Cg id='content' transform='translate(0.000000, 35.000000)'%3E%3Cpath d='M20.8531245,26.2734433 C20.6618378,26.0821567 20.3388596,26.075761 20.1435975,26.2710231 C19.9540459,26.4605747 19.9494189,26.7839513 20.1460177,26.9805501 L24.0320818,30.8666142 C24.4229391,31.2574715 25.0552935,31.253412 25.441839,30.8602383 L33.3186929,22.8483184 C33.5082694,22.6587419 33.5095293,22.3408996 33.3142671,22.1456374 C33.1247155,21.9560858 32.804404,21.9483938 32.6115861,22.1412117 L24.6662394,30.0865583 L20.8531245,26.2734433 Z' id='Combined-Shape-Copy-2'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* 选中卡片选择框固定住 */
.eq-card:hover .eq-checkbox,
.eq-card-active .eq-checkbox {
    display: block;
}

/* 激活时样式 */
.eq-card-active {
    transform: scale(0.9, 0.9);
}

.eq-card-active, .eq-card-active:hover {
    box-shadow: 0 4px 26px 4px rgba(69, 149, 216, 0.3);
}

/*
* 卡片填充尺寸
*/
@media (min-width: 568px) {
    .eq-card-small .eq-card-header,
    .eq-card-small .eq-card-body,
    .eq-card-small .eq-card-footer {
        padding: 0 30px;
        margin: 30px 0;
    }
}

@media (min-width: 768px) {
    .eq-card-medium .eq-card-header,
    .eq-card-medium .eq-card-body,
    .eq-card-medium .eq-card-footer {
        padding: 0 60px;
        margin: 60px 0;
    }
}

@media (min-width: 1024px) {
    .eq-card-large .eq-card-header,
    .eq-card-large .eq-card-body,
    .eq-card-large .eq-card-footer {
        padding: 0 80px;
        margin: 80px 0;
    }
}

/* 组件: 点导航 dotnav
 ========================================================================== */
.eq-dotnav {
    list-style: none;
    margin: 0 0 0 -12px;
    padding: 0;
    text-align: center;
}

.eq-dotnav li {
    display: inline-block;
    padding-left: 12px;
}

.eq-dotnav li a {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(102, 102, 102, 0.2);
}

/* 垂直点 */
.eq-dotnav-vertical {
    margin-left: 0;
    margin-top: -12px;
}

.eq-dotnav-vertical li {
    display: block;
    padding-left: 0;
    padding-top: 12px;
}

.eq-dotnav li.eq.active a {
    background-color: rgba(102, 102, 102, 0.6);
}

/* 组件: dl dt dd 描述列表元素
 * 轻松创建外观精美的描述列表，这些列表具有不同的样式。
 ========================================================================== */
.eq-description-list > dt {
    font-weight: bold;
    text-transform: uppercase;
}

.eq-description-list > dt:nth-child(n+2) {
    margin-top: 20px;
}

/* 线分割 */
.eq-description-list-divider > dt:nth-child(n+2) {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #E8E8E8;
}


/* 组件: 表单
 ========================================================================== */

/* 白色表单 */
.eq-form-white {
    color: #ffffff;
}

/* 字段分组 */
.eq-field-row {
    margin-bottom: 25px;
}

.eq-field-row {
    *zoom: 1;
}

.eq-field-row::before,
.eq-field-row::after {
    display: table;
    content: "";
}

.eq-field-row::after {
    clear: both;
}

/*
* 基础样式
*/
.eq-field {
    width: 100%;
    max-width: 100%;
    outline: none; /* 去掉默认点击颜色边框 */
    resize: none;
    border: 1px solid #E8E8E8;
    padding: 12px 8px;
    border-radius: 5px;
    color: #5E626A;
    background: none;
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
    -webkit-transition-property: color, background-color, border;
    transition-property: color, background-color, border;
    display: inline-block;
    vertical-align: middle;
}

.eq-field:focus {
    border-color: #4695D8;
    background: #fff;
}

/* 单线边框，用在深色背景上 */
.eq-field-line {
    padding: 8px 0;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    color: #ffffff;
    border-radius: 0;
}

.eq-field-line:focus,
.eq-field-line:invalid {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 1);
}

/* 单线边框 placeholder */
.eq-field-line:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.eq-field-line::-moz-placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.eq-field-line::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* label 标题 */
.eq-label {
    color: #5E626A;
    margin-bottom: 5px;
    display: block;
}

/* 文本框 */
.eq-textarea {
    overflow: auto;
}

/* 下拉选项 */
.eq-select {
    height: 42px;
    line-height: 42px;
    padding: 0 8px;
}

/* 单选按钮和复选框 */
.eq-radio,
.eq-checkbox {
    display: inline-block;
    height: 16px;
    width: 16px;
    margin-top: -3px;
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #E8E8E8;
    background: no-repeat 50% 50%;
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
    -webkit-transition-property: background-color, border;
    -moz-transition-property: background-color, border;
    transition-property: background-color, border;
}

.eq-radio {
    border-radius: 50%;
}

.eq-checkbox {
    border-radius: 3px;
}

/* 焦点状态 */
.eq-radio:focus,
.eq-checkbox:focus {
    outline: none;
}

/* 选中或未知状态 */
.eq-radio:checked,
.eq-checkbox:checked,
.eq-checkbox:indeterminate {
    background-color: rgba(70, 149, 216, 1);
    border-color: transparent;
}

.eq-radio:checked {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iM3B4IiBoZWlnaHQ9IjNweCIgdmlld0JveD0iMCAwIDMgMyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNDIgKDM2NzgxKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5PdmFsIDE1ODwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJhZG1pbiIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkFkZC1tb2R1bGVzLW1lbnUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMjUuMDAwMDAwLCAtNjU1LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTE1OCIgY3g9IjIyNi41IiBjeT0iNjU2LjUiIHI9IjEuNSI+PC9jaXJjbGU+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=");
}

.eq-checkbox:checked {
    background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='14px' height='10px' viewBox='0 0 14 10' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3ECombined Shape Copy 2%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Ariticle' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-120.000000, -366.000000)'%3E%3Cg id='artical' transform='translate(100.000000, 309.000000)' fill='%23FFFFFF'%3E%3Cg id='content' transform='translate(0.000000, 35.000000)'%3E%3Cpath d='M20.8531245,26.2734433 C20.6618378,26.0821567 20.3388596,26.075761 20.1435975,26.2710231 C19.9540459,26.4605747 19.9494189,26.7839513 20.1460177,26.9805501 L24.0320818,30.8666142 C24.4229391,31.2574715 25.0552935,31.253412 25.441839,30.8602383 L33.3186929,22.8483184 C33.5082694,22.6587419 33.5095293,22.3408996 33.3142671,22.1456374 C33.1247155,21.9560858 32.804404,21.9483938 32.6115861,22.1412117 L24.6662394,30.0865583 L20.8531245,26.2734433 Z' id='Combined-Shape-Copy-2'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.eq-checkbox:indeterminate {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23fff%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E");
}

/* 白色表单时 */
.eq-radio-white:checked,
.eq-checkbox-white:checked,
.eq-checkbox-white:indeterminate {
    background-color: transparent;
    border: 1px solid #fff;
}

/*
* 特殊样式
*/
.eq-field-controls-text {
    color: #989898;
}

.eq-checkbox-radius {
    border-radius: 50%;
    width: 22px;
    height: 22px;
}

/* 字段白色背景 */
.eq-field-white {
    background: #fff;
}

/*
* 表单状态
*/

/* 错误验证状态，点击后验证 */
.eq-field:focus:invalid {
    background: #fff1f1;
}

/* 正确验证状态 */
.eq-field:focus:valid {
    background: #ffffff;
}

.eq-field-line:focus:valid {
    background: none;
}

/* 字段验证错误*/
.eq-error-message {
    color: #ef0000;
    text-align: left;
    margin-top: 5px;
}

/* 白色表单时 */
.eq-form-white .eq-error-message {
    color: #e8ef00;
}

.eq-form-white .eq-error {
    border-bottom-color: #e8ef00;
}

/*
* 表单大小
*/
.eq-field-small {
    height: 30px;
    line-height: 28px;
    font-size: 0.875rem;
}

.eq-field-large {
    height: 52px;
    line-height: 50px;
    font-size: 1rem;
}

/*
* 表单布局
*/

/* 水平方向 */
@media (min-width: 768px) {
    .eq-form-horizontal .eq-label {
        float: left;
        width: 20%;
        padding-top: 10px;
    }

    .eq-field-controls {
        float: left;
        width: 80%;
    }

    .eq-field-controls-text {
        padding-top: 8px;
        color: #989898;
    }
}


/* 调整 radio 和 checkbox 间距 */
.eq-label-check {
    margin-right: 20px;
    margin-top: 10px;
    display: inline-block;
    color: #5E626A;
}

.eq-label-check input[type="radio"],
.eq-label-check input[type="checkbox"] {
    margin-right: 8px;
}

/*
* 搜索框
*/
.eq-search {
    position: relative;
}

.eq-search-field {
    border: none;
    width: 100%;
    background: none;
}

.eq-search-field:focus {
    outline: 0;
    background: none;
}

/* 有图标时的样式 */
.eq-search .eq-search-field {
    padding-left: 32px;
    line-height: 24px;
}

/* 搜索图标 */
.eq-search::before {
    position: absolute;
    content: "";
    /*background: url("../images/edit-search.svg") no-repeat left center;*/
    top: 0;
    bottom: 0;
    left: 0;
    width: 24px;
    height: 24px;
    line-height: 24px;
    cursor: pointer;
    transition: all 1s;
}

/* 搜索框收缩 */
.eq-search-expend .eq-search-field {
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNS43OCAyMC44NiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOm5vbmU7c3Ryb2tlOiNmZmY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5zZWFyY2gtd2hpdGU8L3RpdGxlPjxnIGlkPSLlm77lsYJfMiIgZGF0YS1uYW1lPSLlm77lsYIgMiI+PGcgaWQ9IuWbvuWxgl8xLTIiIGRhdGEtbmFtZT0i5Zu+5bGCIDEiPjxjaXJjbGUgY2xhc3M9ImNscy0xIiBjeD0iOS41IiBjeT0iOS41IiByPSI5Ii8+PGxpbmUgY2xhc3M9ImNscy0xIiB4MT0iMTYuNSIgeTE9IjE0LjQ1IiB4Mj0iMjUuNSIgeTI9IjIwLjQ1Ii8+PC9nPjwvZz48L3N2Zz4=") no-repeat left center;
    background-size: 25px auto;
    opacity: 0.8;
    padding: 8px 8px 6px 30px;
    line-height: 28px;
    width: 0;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    color: #ffffff;
}

.eq-search-expend .eq-search-field:hover {
    opacity: 1;
}

.eq-search-expend .eq-search-field:focus {
    width: 200px;
    opacity: 1;
}

/* Placeholder */
.eq-search-field:-ms-input-placeholder {
    color: #989898 !important;
}

.eq-search-field::-moz-placeholder {
    color: #989898;
}

.eq-search-field::-webkit-input-placeholder {
    color: #989898;
}

.eq-search-expend .eq-search-field:-ms-input-placeholder {
    color: #ffffff !important;
}

.eq-search-expend .eq-search-field::-moz-placeholder {
    color: #ffffff;
}

.eq-search-expend .eq-search-field::-webkit-input-placeholder {
    color: #ffffff;
}

/*
* 编辑器
*/
.eq-editor-bg {
    background: #ffffff;
    border-radius: 5px;
}

.eq-editor-bg .eq-field {
    border: none;
    padding: 15px;
    font-size: 18px;
}

.eq-editor-content {
    height: 380px;
    overflow: scroll;
    padding: 15px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border: 1px solid #E8E8E8;
}

.eq-editor-content:focus {
    outline: none;
}

.eq-editor-navbar {
    background: #F0F0F0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.eq-editor-toolbar {
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
}

.eq-editor-toolbar li {
    float: left;
}

.eq-editor-toolbar li > a {
    display: block;
    padding: 10px 18px;
}

.eq-editor-toolbar li > a:hover {
    background: #f8f8f8;
}

/*
* 字体图标
*/
@font-face {
    font-family: eqfont;
    src: url('../fonts/eqfont.ttf'),
    url('../fonts/eqfont.eot'),
    url('../fonts/eqfont.woff');
}

[class*='eq-fonticon-'] {
    font-family: eqfont;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 10px;
    color: #858585;
    font-style: normal;
}

.eq-editor-toolbar li > a:hover [class*='eq-fonticon-'] {
    color: #222222;
}

.eq-fonticon-color:before {
    content: '\e907';
}

.eq-fonticon-head:before {
    content: '\e909';
}

.eq-fonticon-bold:before {
    content: '\e908';
}

.eq-fonticon-italic:before {
    content: '\e904';
}

.eq-fonticon-underline:before {
    content: '\e903';
}

.eq-fonticon-strikethrough:before {
    content: '\e902';
}

.eq-fonticon-listul:before {
    content: '\e90b';
}

.eq-fonticon-listol:before {
    content: '\e900';
}

.eq-fonticon-link:before {
    content: '\e90a';
}

.eq-fonticon-image:before {
    content: '\e906';
}

.eq-fonticon-movie:before {
    content: '\e90c';
}


/* 组件: 过滤 Filter
 * 过滤或排序项目。
 ========================================================================== */
.eq-filter {
    padding: 0;
    margin: 0;
    list-style: none;
}


/* 组件: 列表 List
 * 轻松创建外观精美的列表，这些列表具有不同的样式。
 ========================================================================== */
.eq-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.eq-list::before, .eq-list::after {
    display: table;
    content: "";
}


/* 组件: 表格
 ========================================================================== */
.eq-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.eq-table thead tr {
    border-bottom: 1px solid #CACACA;
}

.eq-table th {
    text-align: left;
    padding: 16px 12px;
    color: #989898;
    font-size: 0.875rem;
    font-weight: normal;
}

.eq-table td {
    padding: 16px 12px;
    vertical-align: top;
}

.eq-table tbody tr {
    -webkit-transition: background-color 0.5s linear;
    transition: background-color 0.5s linear;
}

/*
* 垂直居中
*/
.eq-table-middle td {
    vertical-align: middle;
}

/*
* 行分割
*/
.eq-table-divider tr:not(:first-child) {
    border-top: 1px solid #E8E8E8;
}

/*
* 表格交互
*/
.eq-table-hover tbody tr:hover,
.eq-table-hover tbody tr.active {
    background: #ffffff;
}


/* 组件: 提示
 ========================================================================== */
.eq-tooltip {
    position: relative;
    display: inline-block;
}

.eq-tooltip-content {
    position: absolute;
    top: -75px;
    left: 50%;
    background: #ffffff;
    color: #585858;
    padding: 15px;
    border-radius: 5px;
    font-size: 12px;
    width: 120px;
    margin-left: -60px;
    box-shadow: 0 0 25px 0 rgba(152, 152, 152, 0.1);
    display: none;
}

.eq-tooltip-content::after {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    content: "";
    border-top: 6px solid #ffffff;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    width: 0;
    height: 0;
    box-shadow: 0 3px 25px 0 rgba(152, 152, 152, 0.1);
}

.eq-tooltip-content h6 {
    margin-bottom: 5px;
    font-size: 13px;
}

.eq-tooltip:hover .eq-tooltip-content {
    display: block;
}

/* 组件: 高度
 ========================================================================== */
/* 全屏视窗高度设置*/
.eq-height-viewport {
    min-height: 100vh;
    height: 100%;
}

/* 组件: 导航
 ========================================================================== */
/*
* 导航条
*/
.eq-navbar,
.eq-nav {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: flex-start;
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
}

.eq-navbar::before,
.eq-navbar::after {
    content: "";
    display: table;
}

.eq-navbar::after {
    clear: both;
}

/* 定义包含背景色 */
.eq-navbar-container {
    background: #ffffff;
    display: none;
}

.eq-navbar-container.collapse {
    display: block;
}

/* 设置 ul 为导航 */
.eq-navbar-nav,
.eq-icon-navbar {
    list-style: none;
    margin: 0;
    padding: 0;
}

.eq-navbar-nav {
    margin-left: -15px;
    margin-right: -15px;
}

.eq-icon-navbar {
    font-size: 0; /*  清除  inline-block 间隙  */
}

.eq-navbar-nav > li,
.eq-icon-navbar > li {
    position: relative;
}

.eq-navbar-nav > li:not(:first-child) {
    box-shadow: inset 0 1px #e8f0ff;
}

.eq-icon-navbar > li {
    display: inline-block;
    font-size: 1rem;
}

.eq-navbar-nav > li > a {
    display: block;
    line-height: 50px;
    height: 50px;
    padding: 0 50px;
    font-size: 1rem;
    color: #585858;
}

.eq-navbar-nav > li:hover > a,
.eq-navbar-nav > li > a:focus,
.eq-navbar-nav > li > a:active,
.eq-navbar-nav > li.eq-active a {
    background: #8098C0;
    color: #ffffff;
}

/* icon 导航 */
.eq-icon-navbar > li > a {
    display: inline-block;
    padding: 12px 20px;
    line-height: 24px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    opacity: 0.5;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    vertical-align: middle;
}

.eq-icon-navbar > li a:hover {
    opacity: 1;
}

/* 导航位置 */
.eq-navbar-center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    float: none;
    max-width: 50%;
    overflow: hidden;
}

.eq-navbar-right {
    float: right;
}

/* 导航切换图标 */
.eq-navbar-toggle {
    display: block;
    position: relative;
    width: 22px;
    height: 18px;
}

/* 两条细线 */
.eq-navbar-toggle::after {
    content: "";
    position: absolute;
    height: 2px;
    background: #989898;
    left: 0;
    top: 0;
    width: 22px;
    box-shadow: 0 8px 0 #989898;
    border-radius: 2px;
}

/* 三条细线 */
.eq-toggle-icon::after {
    height: 1px;
    box-shadow: 0 6px 0 #989898, 0 12px 0 #989898;
}

/* 反白 */
.eq-navbar-toggle-white::after {
    background: #ffffff;
    box-shadow: 0 8px 0 #ffffff;
}

.eq-navbar-toggle span {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* 下拉导航 */
.eq-navbar-dropmenu {
    position: absolute;
    list-style: none;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 26px 0 rgba(69, 149, 216, 0.2);
    min-width: 100px;
    padding: 0;
    z-index: 1;
    display: none;
}

.eq-navbar-dropmenu.open-menu {
    display: block;
}

.eq-navbar-dropmenu::before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 9px solid #ffffff;
    margin-left: -9px;
    top: -9px;
    left: 50%;
}

.eq-navbar-dropmenu > li > a {
    color: #585858;
    padding: 15px 15px 0;
    display: block;
}

.eq-navbar-dropmenu > li:last-child > a {
    padding-bottom: 15px;
}

.eq-navbar-dropmenu > li > a:hover {
    color: #4695D8;
}

.eq-navbar-nav > li:hover .eq-navbar-dropmenu {
    display: block;
}

/*
* 列表导航
*/
.eq-nav > li > a {
    display: block;
    padding: 6px;
    clear: both;
    line-height: 28px;
}

/* 组件: 标签导航
 ========================================================================== */
.eq-navtab {

}

/* 头像 */
.eq-avatar {
    width: 44px;
    height: 44px;
    line-height: 44px;
    background: rgba(255, 255, 255, 1);
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    font-size: 18px;
}

@media (min-width: 1024px) {
    .eq-navbar-nav {
        float: left;
        margin: 0;
    }

    .eq-navbar-container {
        display: block;
    }

    .eq-navbar-nav > li {
        float: left;
        border: none;
    }
}

/* 组件: icons
 ========================================================================== */
[class*="eq-icons-"] {
    display: inline-block;
    padding-right: 30px;
    float: left;
    width: 28px;
    height: 28px;
    background: left center no-repeat;
    background-size: auto 20px;
}

/*
* 图标
*/

.eq-icons-search {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNS43OCAyMC44NiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOm5vbmU7c3Ryb2tlOiM1ZTYyNmE7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5zZWFyY2g8L3RpdGxlPjxnIGlkPSLlm77lsYJfMiIgZGF0YS1uYW1lPSLlm77lsYIgMiI+PGcgaWQ9IuWbvuWxgl8xLTIiIGRhdGEtbmFtZT0i5Zu+5bGCIDEiPjxjaXJjbGUgY2xhc3M9ImNscy0xIiBjeD0iOS41IiBjeT0iOS41IiByPSI5Ii8+PGxpbmUgY2xhc3M9ImNscy0xIiB4MT0iMTYuNSIgeTE9IjE0LjQ1IiB4Mj0iMjUuNSIgeTI9IjIwLjQ1Ii8+PC9nPjwvZz48L3N2Zz4=");
}

.eq-icons-help {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMS43MyAyMSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOm5vbmU7c3Ryb2tlOiM1ZTYyNmE7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5jbHMtMntmb250LXNpemU6MTUuNDdweDtmaWxsOiM1ZTYyNmE7Zm9udC1mYW1pbHk6UGluZ0ZhbmdTQy1SZWd1bGFyLUdCcGMtRVVDLUgsIFBpbmdGYW5nIFNDO308L3N0eWxlPjwvZGVmcz48dGl0bGU+aGVscDwvdGl0bGU+PGcgaWQ9IuWbvuWxgl8yIiBkYXRhLW5hbWU9IuWbvuWxgiAyIj48ZyBpZD0i5Zu+5bGCXzEtMiIgZGF0YS1uYW1lPSLlm77lsYIgMSI+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSIxMC41IiBjeT0iMTAuNSIgcj0iMTAiLz48dGV4dCBjbGFzcz0iY2xzLTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuMjcgMTYuMzMpIj7vvJ88L3RleHQ+PC9nPjwvZz48L3N2Zz4=");
    background-size: auto 22px;
}

.eq-icons-home {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMy4xNCAyMC4wOSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOm5vbmU7c3Ryb2tlOiM1ZTYyNmE7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5ob21lPC90aXRsZT48ZyBpZD0i5Zu+5bGCXzIiIGRhdGEtbmFtZT0i5Zu+5bGCIDIiPjxnIGlkPSLlm77lsYJfMS0yIiBkYXRhLW5hbWU9IuWbvuWxgiAxIj48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xMy4yMiwxOS41OVYxNi42N2ExLjY1LDEuNjUsMCwwLDAtMS42OS0xLjc4LDIuODUsMi44NSwwLDAsMC0yLjMxLDEuNzh2Mi45MmgtNHYtOEgxLjk0Yy0xLjUzLDAtMS45LS44OS0uODMtMmw3Ljk0LThhMy40OSwzLjQ5LDAsMCwxLDUsMGw3Ljk0LDhjMS4wOCwxLjA5LjcxLDItLjgyLDJoLTN2OFoiLz48cG9seWxpbmUgY2xhc3M9ImNscy0xIiBwb2ludHM9IjE3LjUyIDIuNjEgMjEuMTMgMi43MyAyMS4yNSA2LjM0Ii8+PC9nPjwvZz48L3N2Zz4=");
}

/* 白色图标 */
.eq-icons-white-search {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNS43OCAyMC44NiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOm5vbmU7c3Ryb2tlOiNmZmY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5zZWFyY2gtd2hpdGU8L3RpdGxlPjxnIGlkPSLlm77lsYJfMiIgZGF0YS1uYW1lPSLlm77lsYIgMiI+PGcgaWQ9IuWbvuWxgl8xLTIiIGRhdGEtbmFtZT0i5Zu+5bGCIDEiPjxjaXJjbGUgY2xhc3M9ImNscy0xIiBjeD0iOS41IiBjeT0iOS41IiByPSI5Ii8+PGxpbmUgY2xhc3M9ImNscy0xIiB4MT0iMTYuNSIgeTE9IjE0LjQ1IiB4Mj0iMjUuNSIgeTI9IjIwLjQ1Ii8+PC9nPjwvZz48L3N2Zz4=);
}

.eq-icons-white-home {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMy4xNCAyMC4wOSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOm5vbmU7c3Ryb2tlOiNmZmY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5ob21lLXdoaXRlPC90aXRsZT48ZyBpZD0i5Zu+5bGCXzIiIGRhdGEtbmFtZT0i5Zu+5bGCIDIiPjxnIGlkPSLlm77lsYJfMS0yIiBkYXRhLW5hbWU9IuWbvuWxgiAxIj48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xMy4yMiwxOS41OVYxNi42N2ExLjY1LDEuNjUsMCwwLDAtMS42OS0xLjc4LDIuODUsMi44NSwwLDAsMC0yLjMxLDEuNzh2Mi45MmgtNHYtOEgxLjk0Yy0xLjUzLDAtMS45LS44OS0uODMtMmw3Ljk0LThhMy40OSwzLjQ5LDAsMCwxLDUsMGw3Ljk0LDhjMS4wOCwxLjA5LjcxLDItLjgyLDJoLTN2OFoiLz48cG9seWxpbmUgY2xhc3M9ImNscy0xIiBwb2ludHM9IjE3LjUyIDIuNjEgMjEuMTMgMi43MyAyMS4yNSA2LjM0Ii8+PC9nPjwvZz48L3N2Zz4=);
}

.eq-icons-white-help {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMS43MyAyMSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOm5vbmU7c3Ryb2tlOiNmZmY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5jbHMtMntmb250LXNpemU6MTUuNDdweDtmaWxsOiNmZmY7Zm9udC1mYW1pbHk6UGluZ0ZhbmdTQy1SZWd1bGFyLUdCcGMtRVVDLUgsIFBpbmdGYW5nIFNDO308L3N0eWxlPjwvZGVmcz48dGl0bGU+aGVscC13aGl0ZTwvdGl0bGU+PGcgaWQ9IuWbvuWxgl8yIiBkYXRhLW5hbWU9IuWbvuWxgiAyIj48ZyBpZD0i5Zu+5bGCXzEtMiIgZGF0YS1uYW1lPSLlm77lsYIgMSI+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSIxMC41IiBjeT0iMTAuNSIgcj0iMTAiLz48dGV4dCBjbGFzcz0iY2xzLTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuMjcgMTYuMzMpIj7vvJ88L3RleHQ+PC9nPjwvZz48L3N2Zz4=);
    background-size: auto 22px;
}

.eq-icons-arrow-down {
    /*background: url("../images/arrow-down@2x.png") no-repeat center center;*/
    background-size: 11px;
    width: 11px;
    height: 11px;
    display: inline-block;
}

/* 组件: 焦点图 slideshow
 ========================================================================== */
.eq-slideshow {
    position: relative;
    text-align: center;
    margin: 0 auto;
}

.eq-slidenav-previous,
.eq-slidenav-next {
    position: absolute;
    top: 50%;
    margin-top: -15px;
}

.eq-slidenav-previous {
    left: 5%;
}

.eq-slidenav-next {
    right: 5%;
}

.eq-slideshow-items {
    position: relative;
    z-index: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    min-height: 350px;
}

.eq-slideshow-items li {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    will-change: transform, opacity;
    touch-action: pan-y;
    transition: all 1s ease-in;
    opacity: 1;
}

.eq-slideshow-items > li:not(.eq-active) {
    opacity: 0;
    /*display: none;*/
}

/* 组件: 划出遮盖
 ========================================================================== */
.eq-offcanvas-cover {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    z-index: 1000;
    width: 0;
}

.eq-canvas-open {
    width: 100%;
}

.eq-offcanvas-cover-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
    opacity: 0;
    width: 0;
    height: 100%;
    transition: opacity 0.5s ease-in-out;
}

.eq-canvas-open .eq-offcanvas-cover-bg {
    opacity: 1;
    width: 100%;
}

.eq-offcanvas-container {
    background: #ffffff;
    position: fixed;
    overflow: hidden;
    height: 100%;
    width: 280px;
}

.eq-offcanvas-scroller {
    height: 100%;
    position: absolute;
    overflow-y: scroll;
    width: 300px; /* 用于隐藏里面滚动条 */
}

.eq-offcanvas-right {
    right: 0;
    -webkit-transform: translateX(320px);
    -moz-transform: translateX(320px);
    transform: translateX(320px);
    transition: all 0.5s ease-in-out;
}

.eq-canvas-open .eq-offcanvas-right {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
}

/* 组件: 宽度 Width
 * 定义不同视口大小的元素的宽度。
 ========================================================================== */
[class*='eq-width'] {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

/*
* 几行几栏
*/
.eq-width-1-2 {
    width: 50%;
}


/*
* 禁止页面滚动
*/
body.no-scroll {
    overflow: hidden;
}

/* ========================================================================
       辅助类
   ========================================================================== */
/*
* 浮动清理
*/
.eq-clearfix {
    *zoom: 1;
}

.eq-clearfix::before,
.eq-clearfix::after {
    display: table;
    content: "";
}

.eq-clearfix::after {
    clear: both;
}

/*
* 元素可见性
*/
/* 隐藏元素，不占用页面空间 */
.eq-hidden {
    display: none !important;
}

/* 隐藏占用页面空间 */
.eq-invisible {
    visibility: hidden !important;
}

/* 辅助类: margin 外间距
 ========================================================================== */
.eq-margin {
    margin-top: 20px;
    margin-bottom: 20px;
}

.eq-margin-top {
    margin-top: 30px;
}

.eq-margin-bottom {
    margin-bottom: 30px;
}

.eq-margin-left {
    margin-left: 30px;
}

.eq-margin-right {
    margin-right: 30px;
}

.eq-margin-remove {
    margin: 0;
}

.eq-margin-remove-top {
    margin-top: 0;
}

.eq-margin-remove-bottom {
    margin-bottom: 0;
}

.eq-margin-remove-left {
    margin-left: 0;
}

.eq-margin-remove-right {
    margin-right: 0;
}

/* 辅助类: padding 内边距
 ========================================================================== */
.eq-padding {
    padding: 20px;
}

.eq-padding-remove {
    padding: 0;
}

.eq-padding-remove-top {
    padding-top: 0;
}

.eq-padding-remove-bottom {
    padding-bottom: 0 !important;
}

.eq-padding-remove-left {
    padding-left: 0;
}

.eq-padding-remove-right {
    padding-right: 0;
}

@media (min-width: 768px) {
    .eq-margin {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .eq-padding {
        padding: 40px;
    }
}

@media (min-width: 1024px) {
    .eq-padding {
        padding: 60px;
    }
}

/* 响应式隐藏 */
@media (min-width: 480px) {
    .eq-hidden-xs {
        display: none !important;
    }
}

@media (min-width: 568px) {
    .eq-hidden-s {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .eq-hidden-m {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .eq-hidden-l {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .eq-hidden-xl {
        display: none !important;
    }
}

/* 占用页面空间隐藏 */
@media (max-width: 479px) {
    .eq-visible-xs {
        display: none !important;
    }
}

@media (max-width: 567px) {
    .eq-visible-s {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .eq-visible-m {
        display: none !important;
    }
}

@media (max-width: 1023px) {
    .eq-visible-l {
        display: none !important;
    }
}

@media (max-width: 1199px) {
    .eq-visible-xl {
        display: none !important;
    }
}

  /* Recent Jobs */
.eq-job1 {
    text-align: left; 
    font-size: 16px; 
    line-height: 26px; 
    color: #262626; 
    font-weight: bold;
    font-family: Arial; 
    padding: 16px !important;
}
.eq-job2 {
    text-align:left;
    font-size:14px;
    line-height:24px;
    color:#87898c;
    font-weight:normal;
    font-family:ArialMT;
    padding-right:16px!important;
    padding-left:16px!important;
    padding-bottom:16px!important;
}


/*
* 隐藏与显示
*/
.eq-hide {
    display: none;
}

.eq-show {
    display: block;
}

/*
* 链接
*/
.eq-link-block {
    display: block;
}

/* 辅助类: Text 文本
 ========================================================================== */

/*
* 文本对齐
*/
.eq-text-left {
    text-align: left !important;
}

.eq-text-right {
    text-align: right !important;
}

.eq-text-center {
    text-align: center !important;
}

/*
* 文本字号
*/
.eq-text-small {
    font-size: 12px;
}

.eq-text-medium {
    font-size: 14px;
}


/*
* 文本颜色
*/
.eq-text-muted {
    color: #989898;
}

/*
* 正常字重
*/
.eq-normal {
    font-weight: normal;
}

/* 自动滚动*/
.eq-overflow-auto {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*
* 弹性式垂直居中
*/
.eq-vertical {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

/* 表格式居中 */
.eq-vertical-table {
    display: table;
    position: relative;
    margin: 0 auto;
    height: 100%;
    width: 100%;
}

.eq-vertical-table > div {
    display: table-cell;
    vertical-align: middle; /* 只对拥有 align 特性的有效， <div> <span> 等无效。*/
}

.eq-vertical-table-left {
    text-align: left;
}

.eq-vertical-table-right {
    text-align: right;
}

/* 绝对定位式居中 */
.eq-vertical-position {
    /* 需定义 height */
    position: relative;
    height: 580px;
}

.eq-vertical-position > div {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    margin: auto;
    text-align: center;
    height: 30%;
}

/* ========================================================================
   排版内容
 ========================================================================== */
body {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.75;
    color: #222222;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    line-height: 1.4;
    margin-bottom: 1rem;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2.375rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1.125rem;
}

p {
    margin-top: 0;
    margin-bottom: 1.25rem;
}

a {
    color: #383838;
    text-decoration: none;
    outline: none;
    cursor: pointer;
}

a:hover,
a:focus {
    color: #4695D8;
}

@media (min-width: 768px) {

    h1 {
        font-size: 4.25rem;
    }

    h2 {
        font-size: 3.625rem;
    }

    h3 {
        font-size: 3rem;
    }

    h4 {
        font-size: 2.125rem;
    }

    h5 {
        font-size: 1.5rem;
    }

    h6 {
        font-size: 1.25rem;
    }

    h1, h2, h3, h4, h5, h6 {
        margin-bottom: 1.25rem;
    }

}